<!DOCTYPE HTML>
<html>
<body>
  <h1>Canvas Demo</h1>
  <canvas id="canvas" width="1200px" height="1000px"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#00A308";
    function draw(){
      drawSimple();
      //drawComplex();
    }
    function drawSimple(){
      ctx.beginPath();
      ctx.rect(0, 0, 100, 100);
      ctx.closePath();
      ctx.fill();
    }

    function drawComplex(){
      ctx.fillStyle = "#00A308";
      ctx.beginPath();
      ctx.arc(50, 50, 50, 0, Math.PI*2, true);
      ctx.closePath();
      ctx.fill();

      ctx.fillStyle = "#FF1C0A";
      ctx.beginPath();
      ctx.arc(100, 100, 50, 0, Math.PI*2, true);
      ctx.closePath();
      ctx.fill();

      //the rectangle is half transparent
      ctx.fillStyle = "rgba(255, 255, 0, .5)"
      ctx.beginPath();
      ctx.rect(30, 30, 120, 120);
      ctx.closePath();
      ctx.fill(); 
    }

    ctx.save();
    draw();
    ctx.restore();
        
    ctx.save();
    ctx.translate(200,100);
    draw();
    ctx.restore();

    ctx.save();
    ctx.translate(500,100);
    ctx.rotate(0.45);
    draw();
    ctx.restore();


    ctx.save();
    ctx.translate(500,300);
    ctx.rotate(0.45);
    ctx.scale(0.66,0.66);
    draw();
    ctx.restore();


  </script>
</body>
</html>
